<template>
  <div id="scene"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import RunRing from "./js/RunRing";

let scene; //场景
let camera; //相机
let renderer; //创建渲染器
let controls; //控制器
export default {
  name: "Scene",
  data() {
    return {};
  },
  mounted() {
    this.init();
    this.createControls();
    this.render();
    this.creatRing();
    // this.drawCircle();
  },
  beforeDestroy() {
    this.RunRing1.delete();
  },
  methods: {
    init() {
      //创建场景
      scene = new THREE.Scene();

      const container = document.getElementById("scene");

      //透视投影相机
      camera = new THREE.PerspectiveCamera(
        60,
        container.clientWidth / container.clientHeight,
        1,
        10000
      );
      camera.position.set(0, 90, 60);
      camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
      // 创建渲染器对象
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(container.clientWidth, container.clientHeight); // 设置渲染区域尺寸
      container.appendChild(renderer.domElement); // body元素中插入canvas对象

      // 环境光
      const ambient = new THREE.AmbientLight(0x404040, 1);
      scene.add(ambient);
    },
    createControls() {
      controls = new OrbitControls(camera, renderer.domElement);
    },
    render() {
      renderer.render(scene, camera);
      requestAnimationFrame(this.render); // 请求再次执行渲染函数render
    },
    creatRing() {
      let canvas = this.drawCircle();
      this.RunRing1 = new RunRing({
        // img: "clice.png",
        img: new THREE.TextureLoader().load("/img/redCircle.png"),
        // img: new THREE.CanvasTexture(canvas),
        scene: scene,
        speed: 1,
        radius: 40,
        position: [[0, 0, 0]],
      });
    },
    drawCircle() {
      let canvas = document.createElement("canvas");
      canvas.width = canvas.height = 100;
      let ctx = canvas.getContext("2d");

      //绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
      ctx.arc(50, 50, 50, 0, Math.PI * 2, false);

      //创建一个表示放射性颜色渐变的CanvasGradient对象
      //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域
      let canvasGradient = ctx.createRadialGradient(50, 50, 20, 50, 50, 50);
      canvasGradient.addColorStop(0, "rgba(0, 255, 0, 0)");
      canvasGradient.addColorStop(0.5, "rgba(0, 255, 0, 0.1)");
      canvasGradient.addColorStop(1, "rgba(0, 255, 0, 0.2)");
      //将fillStyle的属性值设为该CanvasGradient对象
      ctx.fillStyle = canvasGradient;

      ctx.fill();
      return canvas;
    },
  },
};
</script>

<style scoped lang="less">
#scene {
  width: 100%;
  height: 100%;
}
</style>
